<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>applyAuthorStyles / resetStyleInheirtance</title>
  <script src="../../../polymer.js"></script>
  <script src="../../../tools/test/htmltest.js"></script>
  <script src="../../../node_modules/chai/chai.js"></script>
  <style>
    body {
      color: rgb(255, 0, 0);
      font-size: 100px;
    }
    div {
      color: rgb(0, 255, 0);
    }
  </style>
</head>
<body>
  <x-test></x-test>

  <polymer-element name="x-test">
    <template><div id="div">I should be small and green</div></template>
    <script>
      Polymer('x-test', {
        applyAuthorStyles: true,
        resetStyleInheritance: true,
        ready: function() {
          this.appliedAuthorStyles = this.shadowRoot.applyAuthorStyles;
          this.appliedResetStyles = this.shadowRoot.resetStyleInheritance;
        }
      });
    </script>
  </polymer-element>

  <script>
    document.addEventListener('WebComponentsReady', function() {
      var test = document.querySelector('x-test');
      chai.assert.isTrue(test.appliedAuthorStyles, 'applyAuthorStyles applied');
      chai.assert.isTrue(test.appliedResetStyles, 'resetStyleInheritance applied');
      chai.assert.equal(getComputedStyle(test).color, 'rgb(255, 0, 0)',
          'author styles applied correctly');
      chai.assert.equal(getComputedStyle(test.$.div).color, 'rgb(0, 255, 0)',
          'styles reset correctly');
      chai.assert.notEqual(parseInt(getComputedStyle(test.$.div).fontSize), 100,
          'styles reset correctly');
      done();
    });
  </script>
</body>
</html>
